import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const linkDocs= { source: { code: `title = "Example Link"
   ref = "https://example.org"
   value = "Example Link"
   component.NewLink(title, value, ref)`
}}

export const linkView =  {
  metadata: {
    type: 'link',
  },
  config: {
    value: 'Example Link',
    ref: 'https://example.org',
  },
};

export const LinkStoryTemplate = args => ({
  template: `<app-view-link [view]= "view"></app-view-link>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Link component</h1>
<h2>Description</h2>

<p>The Link component is used to present simple links</p>
<h2>Example</h2>

<Meta title="Components/Link" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name = "Link component"
         parameters = {{ docs: linkDocs }}
         args= {{ view: linkView, }}>
    { LinkStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Link component" />
